<template>
	<view class="recommend bg-color">
		<view class="recommend-item">
			<image class="big-img" src="../../static/img/Children.jpg" mode=""></image>
			<view class="small-img-box">
				<image class="small-img" src="../../static/img/Children1.jpg" mode=""></image>
				<image class="small-img" src="../../static/img/Children2.jpg" mode=""></image>
				<image class="small-img" src="../../static/img/Children3.jpg" mode=""></image>
			</view>
		</view>
		<view class="recommend-item">
			<image class="big-img" src="../../static/img/Furnishing.jpg" mode=""></image>
			<view class="small-img-box">
				<image class="small-img" src="../../static/img/Furnishing1.jpg" mode=""></image>
				<image class="small-img" src="../../static/img/Furnishing2.jpg" mode=""></image>
				<image class="small-img" src="../../static/img/Furnishing3.jpg" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style scoped lang="scss">
	.recommend {
		padding: 30rpx 20rpx;


		.recommend-item {
			width: 100%;
			display: flex;
			flex-direction: column;
			background-color: #fff;
			overflow: hidden;
			border-radius: 30rpx;
			margin: 20rpx 0;

			.big-img {
				width: 100%;
				height: 300rpx;
				padding: 0;
				margin: 0;
			}

			.small-img-box {
				width: 100%;
				background-color: #fff;
				height: 240rpx;
			}

			.small-img {
				width: 33.3333%;
				height: 240rpx;
			}
		}


	}
</style>